<template>
  <div>

    <Head />
    <main>
      <div class="top">
        <div class="left">
          <a @click="back()">&lt;&nbsp;返回</a>
        </div>
        考试题目解析
        <img src="../../assets/img/test/result.png" alt="" class="img-result" />
      </div>
      <div class="content">
        <article>
          <div class="title">
            <p>单选题</p>
            <p>第{{ currentPage + 1 }}题/共{{ detailPage.length }}题</p>
          </div>
          <div v-for="(item, index) in detailPage" :key="index + 'detailPage'"
            v-show="currentPage == index">
            <div class="questions">
              <span>{{ index + 1 }}.</span>
              <p class="question">{{ item.topics }}</p>
            </div>
            <div class="slectAnswer">
              <div class="item" v-for="(optionItem, i) in item.options"
                :key="i + 'option'" :class="{
                  rightActive: i == item.answer,
                  errorActive: i == item.studentAnswer
                }">
                <div class="slect A">
                  {{ selectArr[i] }}
                </div>
                <p>{{ optionItem }}</p>
              </div>
            </div>
            <div class="footer">
              <h6>
                考生答案：<span style="color: red">{{
                  selectArr[item.studentAnswer] || "未选"
                }}</span>
              </h6>
              <h6>正确答案：{{ selectArr[item.answer] }}</h6>
              <p>解析：{{ item.analysis }}</p>
            </div>
          </div>
          <button class="btn btn-primary" @click="preExe()"
            v-show="currentPage != 0" style="width: 100px; margin-right: 10px">
            上一题
          </button>
          <button class="btn btn-primary" @click="nextExe()"
            v-show="currentPage != detailPage.length - 1" style="width: 100px">
            下一题
          </button>
        </article>
        <aside>
          <div class="msg">
            <div class="time item">
              考试成绩：
              <span>{{ score }}分</span>
            </div>
            <div class="testType item">
              <span>考试时长：</span>
              <span> 30分钟 </span>
            </div>
            <div class="answerCard item">
              <span>答题卡</span>
              <span style="color: red">错误{{ wrongNum }}题</span>
            </div>
          </div>
          <div class="num">
            <a class="item" v-for="(item, index) in detailPage.length"
              :key="index + 'button'" @click="targetTest(index)"
              :class="{ active: index == currentPage }">
              {{ item }}
            </a>
          </div>
        </aside>
      </div>
    </main>
  </div>
</template>

<script>
import Head from "../home/Head.vue";
export default {
  components: {
    Head
  },
  data() {
    return {
      score: 0,
      detailPage: [],
      currentPage: 0,
      selectArr: ["A", "B", "C", "D", "未选"]
    };
  },
  created() {
    // 保存学生id到本地
    sessionStorage.studentId =
      this.$store.state.userInfo._id || sessionStorage.getItem("studentId");
  },
  beforeMount() {
    if (this.$route.query.testId != undefined) {
      this.getDetail();
    } else {
      this.score = +localStorage.getItem("score");
      this.detailPage = JSON.parse(localStorage.getItem("detailPage"));
    }
  },
  methods: {
    async getDetail() {
      await this.$http.post("/tested/getTestResults").then(({ data }) => {
        // 筛选当前学生的详细信息
        let objArr = data.result.filter(
          (v) =>
            v.studentId._id == sessionStorage.getItem("studentId") &&
            v.testId._id == this.$route.query.testId
        )[0];
        let answerArr = JSON.parse(objArr.stuAnswer);
        let exerciseArr = objArr.testId.exercisesId;
        exerciseArr.forEach((v, i) => {
          v.studentAnswer = answerArr[i];
        });
        this.detailPage = exerciseArr;
      });
    },
    //返回
    back() {
      history.back();
    },
    preExe() {
      this.currentPage--;
    },
    nextExe() {
      this.currentPage++;
    },
    //切换选项卡
    targetTest(i) {
      this.currentPage = i;
    }
  },
  computed: {
    wrongNum() {
      let num = 0;
      this.detailPage.forEach((v) => {
        if (v.studentAnswer != v.answer) num++;
      });
      return num;
    }
  }
};
</script>

<style lang="scss" scoped>
// 头部
.header {
  width: 1200px;
  margin: 0 auto;
  padding: 0 60px;
  height: 50px;
  display: flex;
  background-color: #fff;
  align-items: center;
  justify-content: space-between;
  .userInfo {
    .img {
      width: 30px;
      height: 30px;
      border-radius: 15px;
      background-color: blue;
      margin-right: 20px;
    }
    display: flex;
    align-items: center;
  }
}
main {
  width: 1050px;
  margin: 0 auto;
  //   border: 1px solid red;
  // background-color: white;
  margin-top: 36px;
  .top {
    height: 68px;
    background-color: white;
    text-align: center;
    line-height: 68px;
    position: relative;
    color: #333;
    .img-result {
      position: absolute;
      right: 0;
    }
    .left {
      //   width: 105px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      left: 20px;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    article {
      flex-grow: 1;
      background-color: white;
      padding: 0 28px;
      overflow-y: scroll;
      .title {
        height: 42px;
        display: flex;
        justify-content: space-between;
        color: #009900;
        align-items: center;
        border-bottom: 1px solid #f2f2f2;
      }
      .questions {
        margin-top: 28px;
        display: flex;
        .question {
          margin-bottom: 25px;
        }
      }
      .slectAnswer {
        .item {
          width: 700px;
          display: flex;
          margin-bottom: 25px;
          &.errorActive {
            color: red;
            .slect {
              color: white;
              background-color: red;
            }
          }
          &.rightActive {
            color: green;
            .slect {
              color: white;
              background-color: green;
            }
          }
          .slect {
            width: 35px;
            height: 35px;
            border-radius: 50% 50%;
            background-color: #f2f2f2;
            text-align: center;
            line-height: 35px;
            margin-right: 10px;
          }
          p {
            line-height: 35px;
          }
        }
      }
    }
    .footer {
      margin-top: 20px;
      margin-bottom: 10px;
      background-color: #f6efef;
      min-height: 160px;
      width: 709px;
      padding: 30px;
    }
    aside {
      width: 285px;
      min-height: 650px;
      .msg {
        .item {
          height: 44px;
          padding: 0 20px;
          background-color: white;
          display: flex;
          align-items: center;
          color: #333;
        }
        .time {
          border-bottom: 1px solid #f2f2f2;
          span {
            color: #ff0000;
          }
          .syTime {
            color: #333;
          }
        }
        .answerCard {
          margin-top: 12px;
          display: flex;
          justify-content: space-between;
        }
      }
      .num {
        min-height: 450px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        .item {
          width: 50px;
          height: 50px;
          margin-top: 10px;
          background-color: white;
          margin-right: 7px;
          text-align: center;
          line-height: 50px;
          box-shadow: 0 0 15px #e4e4e4;
          &.active {
            background-color: #007bff;
            color: white;
          }
        }
        .item:hover {
          background-color: #ccc;
        }
        .item:nth-child(5n) {
          margin-right: 0;
        }
      }
      .submitBtn {
        width: 100%;
        height: 45px;
        background-color: #009900;
        color: white;
        text-align: center;
        line-height: 45px;
      }
      .click-up {
        width: 280px;
        height: 50px;
      }
    }
  }
}
#bg {
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.2;
  position: absolute;
  top: 0;
  left: 0;
}
.confirm {
  position: absolute;
  width: 500px;
  height: 310px;
  background-color: white;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
}
</style>
